从零玩转jQuery-CSS操作
jQuery操作CSS样式
用于设置或获取元素CSS样式
格式1:
DOM元素.css("样式名称", "值");格式2:
DOM元素.css({"样式名称1":"值1","样式名称2":"值2"});
<script>
$(function () {
$("button").click(function () { // 1.单个样式设置// $("div").css("width", "100px");// $("div").css("height", "100px");// $("div").css("background", "red");
// 2.链式设置样式// $("div").css("width", "100px").css("height", "100px").css("background", "red");
// 3.传入对象一次性设置样式
$("div").css({ "width":"100px", "height":"100px", "background":"blue"
}); // 4.获取指定样式的值
console.log($("div").css("width"));
});
}); </script>jQuery操作元素尺寸
设置或获取元素宽度(相当于获取width属性值)
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>11-jQuery操作位置和尺寸</title>
<style>
*{ margin: 0; padding: 0;
} .father{ width: 250px; height: 250px; background-color: red; margin-left: 50px; position: relative;
} .son{ width: 100px; height: 100px; background-color: blue; position: absolute; left: 50px; top: 50px;
} </style>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="代码/js/jquery-1.12.4.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () { // 1.获取元素宽度(不包括padding和border)// alert($('.son').width());
});
$("button").eq(1).click(function () { // 2.设置元素宽度(不包括padding和border)// $(".son").width("50px");
});
}); </script></head><body><div class="father">
<div class="son"></div></div><button>获取</button><button>设置</button></body></html>设置或获取元素宽度(相当于获取height属性值)
用上面按钮代码自己写,工作后都得靠自己,多锻炼自学能力(如何查看文档,如何编写测试案例等)
innerHeight()/innerWidth()
用上面按钮代码自己写,工作后都得靠自己,多锻炼自学能力(如何查看文档,如何编写测试案例等)
outerHeight/outerWidth()
用上面按钮代码自己写,工作后都得靠自己,多锻炼自学能力(如何查看文档,如何编写测试案例等)
jQuery操作元素位置
获取或设置元素相对窗口的偏移位
<script>
$(function () {
$("button").eq(0).click(function () { // 1.获取距离窗口的偏移位(从border开始)
alert($('.son').offset().left); // 100
});
$("button").eq(1).click(function () { // 2.设置距离窗口的偏移位
$('.son').offset({left:10, top:10});
});
}); </script>获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离
<script>
$(function () {
$("button").eq(0).click(function () { // 1.获取匹配元素相对父元素的偏移
alert($('.son').position().left);// 50
});
$("button").eq(1).click(function () { // 2.无效,不能设置相对定位元素的偏移位
$('.son').position({left:10, top:10})
});
}); </script>设置或获取匹配元素相对滚动条顶部的偏移。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>12-jQuery操作位置</title>
<style>
*{ margin: 0; padding: 0;
} .scroll{ margin-top: 100px; margin-left: 100px; width: 100px; height: 200px; border: 1px solid #000; overflow: auto;
} </style>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="代码/js/jquery-1.12.4.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () { // 7.获取匹配元素相对滚动条顶部的偏移// alert($('.scroll').scrollTop());// alert($('html').scrollTop());
// 兼容所有浏览器写法
alert($('html').scrollTop()+$('body').scrollTop());
});
$("button").eq(1).click(function () { // 8.设置匹配元素相对滚动条顶部的偏移// $('.scroll').scrollTop(100);// $('html').scrollTop(100);
// 兼容所有浏览器写法
$('html,body').scrollTop(100);
});
}); </script></head><body><div class="scroll">
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div><button>获取</button><button>设置</button><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></body></html>用上面按钮代码自己写,工作后都得靠自己,多锻炼自学能力(如何查看文档,如何编写测试案例等)
作者：极客江南
链接：https://www.jianshu.com/p/d7df3ba6ce84
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦